<template>
  <div class="my-container">
    <el-row>
      <el-col :span="24">
        <el-card>
          <div class="header" style="text-align: center">
            <h2 class="title">
              {{ $filters.memberFilter(memberDetailData.realName) }}
            </h2>
          </div>
          <el-tabs v-model="activeName">
            <el-tab-pane :label="$t('msg.member.baseInfo')" name="baseInfo">
              <base-info
                v-if="Object.keys(memberDetailData).length"
                :memberInfo="memberDetailData"
              />
            </el-tab-pane>
            <el-tab-pane
              :label="$t('msg.member.balanceInfo')"
              name="balanceInfo"
            >
              <blance-info
                v-if="Object.keys(memberDetailData).length"
                :memberInfo="memberDetailData"
              />
            </el-tab-pane>
            <el-tab-pane
              :label="$t('msg.member.rechargeInfo')"
              name="rechargeInfo"
            >
              <recharge-info
                v-if="Object.keys(memberDetailData).length"
                :memberInfo="memberDetailData"
                @switch-tab="handleSwitchTab"
              />
            </el-tab-pane>
            <el-tab-pane :label="$t('msg.member.refundInfo')" name="refundInfo">
              <author />
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import BaseInfo from './components/BaseInfo.vue'
import BlanceInfo from './components/BlanceInfo.vue'
import RechargeInfo from './components/RechargeInfo.vue'
import { memberDetail } from '@/api/member'
import { useRoute } from 'vue-router'

const route = useRoute()
const activeName = ref('baseInfo')
const memberId = route.params.id
const memberDetailData = ref({})
const getMemberDetail = async () => {
  memberDetailData.value = await memberDetail(memberId)
}
getMemberDetail()

const handleSwitchTab = (tabName) => {
  activeName.value = tabName
  getMemberDetail()
}
</script>

<style lang="scss" scoped>
.project-card {
  margin-right: 20px;
}
</style>
